<template>
  <div class="page-box">
    <div class="operation-box cenBet">
      <div class="operation-left">
        <el-button @click="is_quarter_edit=false;addEditQuarter.title='新增季度';addEditQuarter.dialogVisible =true" icon="el-icon-circle-plus-outline" type="primary">新增季度</el-button>
        <el-button v-if="tablePaginationQuery.total" type="text">共计<span>{{tablePaginationQuery.total}}</span>条</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <tableCom :data="tableData" :columns="tableColumn" v-loading="tableLoading" max-height="780" element-loading-text="数据加载中..." border>
      <div slot-scope='row' slot="operation">
        <!-- 操作按钮 -->
        <!-- 1启用2停用3已使用 -->
        <el-button v-if="row.row.state!=3" @click="quarter_edit_show(row.row)" type="text">编辑</el-button>
        <el-button v-if="row.row.state!=3" @click="quarter_delete(row.row)" class="danageColor" type="text">删除</el-button>
        <el-button v-if="row.row.state==3" class="infoColor" type="text">已使用</el-button>
      </div>
    </tableCom>
    <!-- 分页 -->
    <pagination v-if="tablePaginationQuery.total" :query="tablePaginationQuery" @paginationCallBack="paginationCallBack" />
    <!-- 模态框 -->
    <subFromDialog @subFromDialogEmitFun="subFromDialogEmitFun" :dialogFrom="addEditQuarter" />
  </div>
</template>
<script>
import subFromDialog from "@/components/ivDialog/subFromDialog"; //提交表单组件
import addEditQuarter from "./addEditQuarter.js"; //新增编辑季度表单
import tableCom from "@/components/tableCom"; //表格组件
import { tableColumn } from "./tableColumn.js"; //表格组件数据
import service from "@/api";
import pagination from "@/components/pagination"; //分页组件
export default {
  components: { subFromDialog, tableCom, pagination },
  data() {
    return {
      tablePaginationQuery: { start: 0, limit: 10, total: 0, current: 1 }, //表格分页参数
      tableLoading: false,
      tableData: [], //表格数据
      tableColumn: tableColumn(), //表格
      addEditQuarter: JSON.parse(JSON.stringify(addEditQuarter)), //季度表单
      quarter_edit_row: {}, //编辑季度内容
      is_quarter_edit: false //是编辑季度
    };
  },
  created() {
    this.initFun();
  },
  methods: {
    initFun() {
      this.quarter_list();
    },
    // 分页查询Quarter
    async quarter_list() {
      const { start, limit } = this.tablePaginationQuery;
      this.tableLoading = true;
      const { data = {} } = await service.quarter_list({
        start,
        limit,
        current: 1
      });
      this.tableLoading = false;
      this.tablePaginationQuery.total = data.results || 0;
      this.tableData = data.rows;
      if (this.tableData.length) {
        this.tableData.map((item, index) => {
          let start_date = this.$moment(
            new Date(item.start_date).getTime(),
            "YYYY-MM"
          );
          let end_date = this.$moment(
            new Date(item.end_date).getTime(),
            "YYYY-MM"
          );
          this.tableData[index].yearMonth = `${start_date}至${end_date}`;
        });
      }
    },
    // 新增编辑Quarter
    async quarter_save(subFromRes, subFromDialogBtn) {
      let subData = {
        name: subFromRes.name,
        start_date: this.$moment(
          new Date(subFromRes.yearMonth[0]).getTime(),
          "YYYY-MM-DD"
        ),
        end_date: this.$moment(
          new Date(subFromRes.yearMonth[1]).getTime(),
          "YYYY-MM-DD"
        )
      };
      let success = false;
      subFromDialogBtn.loading = true;
      if (this.is_quarter_edit) {
        // 如果是编辑
        subData.id = this.quarter_edit_row.id;
        subData.state = this.quarter_edit_row.state;
        success = (await service.quarter_edit(subData)).success;
      } else {
        success = (await service.quarter_save(subData)).success;
      }
      subFromDialogBtn.loading = false;
      if (success) {
        this.$message({
          message: `数据${this.is_quarter_edit ? "编辑" : "添加"}成功`,
          type: "success"
        });
        this.addEditQuarter.dialogVisible = false;
        this.quarter_list();
      }
    },
    async quarter_delete(row) {
      const $confirm = await this.$confirm("此操作将进行删除");
      if (!$confirm) {
        return;
      }
      this.tableLoading = true;
      const { success } = await service.quarter_delete({
        id: row.id
      });
      this.tableLoading = false;
      if (success) {
        this.$message({
          message: `删除成功`,
          type: "success"
        });
        this.quarter_list();
      }
    },
    // 提交表单调取的方法
    subFromDialogEmitFun(subFromDialogBtn = "", subFromRes = {}) {
      // subFromDialogBtn  点击的按钮  subFromRes 整理数据以后的表单
      const { functionName } = subFromDialogBtn;
      if (functionName == "quarter_save") {
        this.quarter_save(subFromRes, subFromDialogBtn);
      }
    },
    // 编辑
    quarter_edit_show(row) {
      this.quarter_edit_row = row;
      this.addEditQuarter.title = "编辑季度";
      let fieldList = this.addEditQuarter.fieldList;
      for (let i = 0; i < fieldList.length; i++) {
        let element = fieldList[i];
        if (element.attribute.labelKey == "yearMonth") {
          this.addEditQuarter.fieldList[i].attribute.labelValue = row[
            element.attribute.labelKey
          ].split("至");
        } else {
          this.addEditQuarter.fieldList[i].attribute.labelValue =
            row[element.attribute.labelKey] || "";
        }
      }
      this.is_quarter_edit = true;
      this.addEditQuarter.dialogVisible = true;
    },
    // 分页的回掉函数
    paginationCallBack() {
      this.quarter_list();
    }
  }
};
</script>
